<!-- 考试管理功能介绍 -->
<template>
  <div>
    <div style="text-align: left; margin-left: 100px">
      <!-- 考试期次：<el-input
        v-model="tableData1.category"
        style="width: 300px"
        placeholder="请输入内容"
        clearable
      ></el-input> -->
      考试名称：<el-input
        v-model="tableData1.examEname"
        style="width: 300px"
        placeholder="请输入内容"
        clearable
      ></el-input>
      <br /><br />
      <el-row>
        <el-button type="primary" @click="addExamOne">新增</el-button>
        <el-button type="primary" plain @click="deletes">批量删除</el-button>
        <el-button type="primary" round @click="search">查询</el-button>
        <el-button type="primary" round plain @click="reset">重置</el-button>
      </el-row>
    </div>
    <br />

    <div style="text-align: left; margin-left: 100px; width: 900px">
      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <!-- <el-table-column
            prop="paperAttributes[0].paperCategor[0].category"
            label="考试期次"
            width="180"
          >
          </el-table-column> -->
          <el-table-column prop="examEname" label="考试名称" width="300">
          </el-table-column>
          <el-table-column prop="examTime" label="考试时间" width="300">
          </el-table-column>
          <el-table-column prop="count" label="考生人数" width="100px">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="130">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button type="text" size="small" @click="updateOne(scope.row)"
                >修改</el-button
              >
              <el-button
                @click.native.prevent="deleteRow(scope.row, tableData)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <br />
    <div style="text-align: left; margin-left: 100px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[3, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        :current-page="currentPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "../common/Pagination.vue";

export default {
  components: { Pagination },
  data() {
    return {
      tableData: [],
      deleteDate: {},
      tableData1: {
        examEname: "",
        category: "",
      },

      updateData: {},
      multipleSelection: [],
      // 分页参数
      currentPage: 1,
      pageSize: 5,
      total: 50,

      page: 1,
      limit: 5,
    };
  },
  created() {
    //查询所有考试信息
    this.showAll();
  },
  methods: {
    //时间戳处理
    timestampToTime(cjsj) {
      var date = new Date(cjsj); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },

    //展式所有考试信息
    showAll() {
      this.$axios
        .get("/api/exam/findAll/" + this.currentPage + "/" + this.pageSize)
        .then((res) => {
          console.log(res);
          for (let i = 0; i < res.data.data.list.length; i++) {
            let time = res.data.data.list[i].examTime;
            // console.log("time",time);
            // console.log("bbb",this.timestampToTime(time));
            res.data.data.list[i].examTime = this.timestampToTime(time);
          }
          this.tableData = res.data.data.list;
          // 分页赋值
          // this.currentPage = this.formInline.page;
          // this.pageSize = this.formInline.limit;
          console.log("total", res.data.data.total);
          this.total = res.data.data.total;
          // console.log(this.data);
        })
        .catch(() => {});
    },
    //条件查询
    search() {
      this.$axios
        .post(
          "/api/exam/find/" + this.currentPage + "/" + this.pageSize,
          this.tableData1
        )
        .then((res) => {
          console.log(res);
          for (let i = 0; i < res.data.data.list.length; i++) {
            let time = res.data.data.list[i].examTime;
            // console.log("time",time);
            // console.log("bbb",this.timestampToTime(time));

            res.data.data.list[i].examTime = this.timestampToTime(time);
          }
          this.tableData = res.data.data.list;
          // 分页赋值
          // this.currentPage = this.formInline.page;
          // this.pageSize = this.formInline.limit;
          console.log("total", res.data.data.total);
          this.total = res.data.data.total;
          // console.log(this.data);
        })
        .catch(() => {});
    },

    //分页方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.selectByType();
      console.log(`每页 ${val} 条`);
    },
    //分页方法
    handleCurrentChange(val) {
      this.currentPage = val;
      this.selectByType();
      console.log(`当前页: ${val}`);
    },
    //分页查询
    selectByType() {
      if (this.tableData1.examEname == "" && this.tableData1.category == "") {
        this.showAll();
      } else {
        this.search();
      }
    },

    //重置
    reset() {
      this.tableData1.examEname = "";
      this.tableData1.category = "";
    },

    //新增考试
    addExamOne() {
      this.$router.push({
        name: "addExamOne", //路由配置中的name
        params: {
          type: 1,
        },
      });
    },
    //修改试题
    updateOne(s) {
      this.updateData = s;

      var stringTime = s.examTime;
      //时间转换
      var date = new Date(stringTime);

      // console.log(date);
      this.updateData.examTime = date;
      // console.log(s.examTime);

      console.log(s);
      // this.$router.push({path: '/addQuestionOne/',params:{data:1} })
      this.$router.push({
        name: "addExamOne", //路由配置中的name
        params: {
          type: 2,
          s,
        },
      });
    },

    //查看详情
    handleClick(s) {
      console.log(s);

      this.updateData = s;
      var stringTime = s.examTime;

      //时间转换
      var date = new Date(stringTime);
      // console.log(date);
      this.updateData.examTime = date;
      // console.log(s.examTime);

      console.log(s);
      // this.$router.push({path: '/addQuestionOne/',params:{data:1} })
      this.$router.push({
        name: "addExamOne", //路由配置中的name
        params: {
          type: 3,
          s,
        },
      });
    },

    //批量删除
    deletes() {
      //得到id数组
      let ids = [];
      // console.log("ids",this.multipleSelection[0].id);
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id);
      }
      this.deleteDate.ids = ids;
      console.log(this.deleteDate.ids);
      this.$axios
        .put("/api/exam/deleteMore/", this.deleteDate)
        .then((res) => {
          if (res.data.code == 200) {
            this.selectByType();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } else {
            this.$message({
              type: "info",
              message: "删除失败",
            });
          }
        })
        .catch(() => {});
    },
    //删除考试信息一条
    deleteRow(data, rows) {
      // rows.splice(data, 1);
      this.$axios
        .put("/api/exam/deleteExam/" + "/" + data.id)
        .then((res) => {
          if (res.data.code == 200) {
            this.selectByType();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } else {
            this.$message({
              type: "info",
              message: "删除失败",
            });
          }
        })
        .catch(() => {});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>